<template>
  <div class="app-container">
    <div class="customContainer towTabel">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
        <el-form-item>
          <span style="color: #888;">使用区域：</span>
          <el-select v-model="formInline.area_type">
            <el-option v-for="item in gift_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">一级类别：</span>
          <el-select filterable placeholder="一级类别" v-model="formInline.one_type" @change="second_type">
            <el-option v-for="item in first_type_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">二级类别：</span>
          <el-select filterable placeholder="二级类别" v-model="formInline.two_type">
            <el-option v-for="item in second_type_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <div class="details" style="margin-bottom:10px;color:#7e7e7e;">
        <span class="title">{{storeName}}</span>
        <span class="titlelist">{{formInline.start_time}}</span>
        <span class="titlelist">预估订货总金额：{{total_money}}</span>
        <span class="titlelist">累计订货总金额：<span :class="{'danger':all_total_money/1>total_money/1}">{{all_total_money}}</span></span>
      </div>
      <!-- 表1 -->
      <el-table highlight-current-row :data="top_list" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" prop="a1" label="礼品机区域">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a1/1>top_list[1].a1/1}">{{scope.row.a1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a2" label="礼品柜区域">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a2/1>top_list[1].a2/1}">{{scope.row.a2}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a3" label="摊位机区域">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a3/1>top_list[1].a3/1}">{{scope.row.a3}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a4" label="企划区域">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a4/1>top_list[1].a4/1}">{{scope.row.a4}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="a5" label="其他区域">
          <template slot-scope="scope">
            <span :class="{'danger':top_list[2].a5/1>top_list[1].a5/1}">{{scope.row.a5}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表2 -->
      <el-table style="margin:10px 0" highlight-current-row :data="list" border size="small" v-loading.body="listLoading" :span-method="spanMethod">
        <el-table-column align="center" prop="name" label="二级分类"></el-table-column>
        <el-table-column align="center" prop="section" label="价格区间">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.section}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="money" label="预估订货金额">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="num" label="预估订货数量">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="all_money" label="累计订货金额">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_money}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="all_num" label="累计订货数量">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_num}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 合计 -->
      <el-table highlight-current-row :data="total_list" :show-header="false" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" prop="section"></el-table-column>
        <el-table-column align="center" prop="money"></el-table-column>
        <el-table-column align="center" prop="num"></el-table-column>
        <el-table-column align="center" prop="all_money">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_money}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="all_num">
          <template slot-scope="scope">
            <span :class="{'danger':scope.row.all_money/1>scope.row.money/1}">{{scope.row.all_num}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { get_type } from '@/api/information/gift';
import { getAreaInfo, getAllInfo } from '@/api/dashboard/orderIndex';
export default {
  data() {
    return {
      top_list: [
        { name: '预估订货金额占比', a1: '0.00%', a2: '0.00%', a3: '0.00%', a4: '0.00%', a5: '0.00%' },
        { name: '预估订货金额', a1: '0.00', a2: '0.00', a3: '0.00', a4: '0.00', a5: '0.00' },
        { name: '累计订货金额', a1: '0.00', a2: '0.00', a3: '0.00', a4: '0.00', a5: '0.00' }
      ],
      total_list: [{ name: '合计', section: '-', money: '', all_money: '', num: '', all_num: '' }],
      listLoading: false,
      list: [],
      look_del: '0',
      money: '',
      storeName: '',
      total_money: '0.00', //预估订货总金额
      all_total_money: '0.00', //累计订货总金额
      first_type_list: null,
      second_type_list: null,
      gift_list: [
        { id: 1, name: '礼品机区域' },
        { id: 2, name: '礼品柜区域' },
        { id: 3, name: '摊位机区域' },
        { id: 4, name: '企划区域' },
        { id: 5, name: '其他区域' }
      ],
      formInline: {
        area_type: 1,
        one_type: '',
        two_type: '',
        store_id: '',
        start_time: ''
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.beforeComingIn();
    });
  },
  methods: {
    getTopData(data, type) {
      this.top_list[1][type] = (data.booking_money / 1000000).toFixed(2);
      this.top_list[2][type] = (data.cumulative_money / 1000000).toFixed(2);
      if (this.total_money / 1 > 0) {
        this.top_list[0][type] = Math.abs((this.top_list[1][type] / this.total_money) * 100).toFixed(2) + '%';
      } else {
        this.top_list[0][type] = '0.00%';
      }
    },
    getTopList() {
      getAllInfo({ store_id: this.formInline.store_id, start_time: this.formInline.start_time }).then(res => {
        if (res.code == 1) {
          let money = 0,
            all_money = 0;
          res.data.forEach(val => {
            money += val.booking_money / 1;
            all_money += val.cumulative_money / 1;
          });
          this.total_money = (money / 1000000).toFixed(2);
          this.all_total_money = (all_money / 1000000).toFixed(2);
          res.data.forEach(val => {
            switch (val.area_type / 1) {
              case 1:
                this.getTopData(val, 'a1');
                break;
              case 2:
                this.getTopData(val, 'a2');
                break;
              case 3:
                this.getTopData(val, 'a3');
                break;
              case 4:
                this.getTopData(val, 'a4');
                break;
              case 5:
                this.getTopData(val, 'a5');
                break;
              default:
                break;
            }
          });
        }
      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        //第一列的合并方法
        const _row_1 = row.rowspan;
        const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: _row_1,
          colspan: _col_1
        };
      }
    },
    beforeComingIn() {
      if (this.$route.params.routerflag) {
        this.first_type();
        this.storeName = this.$route.params.row.store_name ? this.$route.params.row.store_name : this.$route.params.global.store_name;
        this.formInline.start_time = this.$route.params.global.starttime ? this.$route.params.global.starttime : '';
        this.formInline.store_id = this.$route.params.row.store_id ? this.$route.params.row.store_id : this.$route.params.global.store_id;
      }
    },
    first_type() {
      get_type({ id: 0 }).then(response => {
        this.first_type_list = response;
        this.formInline.one_type = response[0].id;
        this.second_type(response[0].id);
      });
    },
    second_type(id) {
      this.formInline.two_type = '';
      get_type({ id: id }).then(response => {
        if (response.length > 1) {
          response.unshift({ id: 0, name: '全部' });
        }
        this.second_type_list = response;
        this.formInline.two_type = response[0].id;
        this.fetchData();
      });
    },
    // 搜索
    searchClick() {
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.list = [];
      this.listLoading = true;
      getAreaInfo(this.formInline)
        .then(res => {
          if (res.code == 1) {
            let list = [];
            res.data.forEach(val => {
              val.list.forEach((item, i) => {
                let obj = {
                  name: val.name,
                  section: item.section,
                  money: (item.booking_money / 1000000).toFixed(2),
                  num: Math.ceil(item.booking_num),
                  all_money: (item.cumulative_money / 1000000).toFixed(2),
                  all_num: Math.ceil(item.cumulative_num),
                  rowspan: i == 0 ? val.list.length : 0
                };
                list.push(obj);
              });
            });
            this.list = list;
            let money = 0,
              num = 0,
              all_money = 0,
              all_num = 0;
            this.list.forEach(val => {
              money += val.money / 1;
              num += val.num / 1;
              all_money += val.all_money / 1;
              all_num += val.all_num / 1;
            });
            this.total_list[0].money = money.toFixed(2);
            this.total_list[0].all_money = all_money.toFixed(2);
            this.total_list[0].num = num;
            this.total_list[0].all_num = all_num;
            this.listLoading = false;
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
      this.getTopList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.title {
  font-size: 20px;
  color: #000;
}
.titlelist {
  font-size: 15px;
  margin: 0 30px;
}
</style>